<script setup lang="ts">
  // export default class {
  // mixins
  import { useInputInfo, useShowDialog } from "@/uses/useInputInfo";

  // 不是一级的成员
  const usernameInput = useInputInfo();
  const passwordInput = useInputInfo();
  const dialog = useShowDialog();

  const tinymceValue = ref("");
  const componentName = "ComponentName";
  // @Prop({ type : String, default: "default" })
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    visible: Boolean,
  });
  // 可以修改name 自身，但其实是通过 .value 的形式去改变了内部的变量值，从而达到name 本身是发生了改变的。
  const name = ref("");

  // 不需要使用 .value 去更新对应内容的值，但不能直接修改person 对象本身。可以修改内部成员的值
  const person = reactive({
    name: name,
    age: 18,
  });
  // name = "ComponentName";
  function onClick() {
    // username.value = "张三";
    usernameInput.model = "张三";
    dialog.show();
  }
  // mounted
  onMounted(() => {
    console.log("ComponentName mounted");
  });
  onActivated(() => {});
  onUnmounted(() => {});

  // }
</script>

<template>
  <div class="fs-2 text-center py-2 panel mx-auto">
    <div v-html="tinymceValue">
    </div>
    <div style="height:100vh">
      <tinymce v-model="tinymceValue"></tinymce>
    </div>

    {{ componentName }}
    <div class="ipt"
         :class="{
           'is-focus': usernameInput.isFocus,
         }">
      <el-input @blur="usernameInput.onFocusOut"
                @focus="usernameInput.onFocusIn"
                v-model="usernameInput.model"></el-input>
    </div>

    <h-select>
      <h-options text="123123"
                 value="ccccccc"></h-options>
      <h-options text="3333333"
                 value="aaaaaaaa"></h-options>
      <h-options text="55555555"
                 value="bbbbbbbbb"></h-options>
    </h-select>
    <div class="ipt"
         :class="{
           'is-focus': passwordInput.isFocus,
         }">
      <el-input @blur="passwordInput.onFocusOut"
                @focus="passwordInput.onFocusIn"
                v-model="passwordInput.model"></el-input>
    </div>
    <div>{{ name }}</div>
    <!-- 组件 配置项特别的多，也会存在是否隐藏显示，加载相关的字段 -->
    <el-button @click="onClick">Click me</el-button>
  </div>
</template>

<style lang="scss" scoped>
  .panel {
    // width: 500px;
  }
  .ipt {
    padding: 10px;
    border: 3px solid transparent;
    transition: all 0.2s;
  }
  .is-focus {
    border-color: var(--theme-primary);
  }
</style>
